<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/inc/sys.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${projectName}-配置文件属性管理</title>
<jsp:include page="/WEB-INF/view/inc/css.jsp"></jsp:include>
</head>
<body class="cld-body">
	<div class="enter-panel ep-xs">
		<input type="hidden" id="configId" value="${param.configId}">
		<div class="form-group" id="viewPanel" style="display: none;"></div>
		<div class="form-group" id="textPanel">
			<textarea class="form-control" id="content" placeholder="配置文件的内容" rows="10" cols="200" style="height: 410px;white-space:nowrap; overflow:scroll;">${msConfig.content}</textarea>
		</div>
  		<div class="footer-operate">
			<span id="saveMsg" class="label label-danger"></span>
 			<div class="btn-group">
				<!-- <button type="button" id="saveRefreshBtn" class="btn btn-default">保存并刷新配置</button>
				<button type="button" id="saveBtn" class="btn btn-success enter-fn">保存</button> -->
				<button type="button" onclick="parent.dialog.close()" class="btn btn-default">关闭</button>
			</div>
		</div>
		<div class="fixed-top-tool">
			<div class="btn-group jutil-btns" data-select="btn-success" data-def="btn-default">
				<button type="button" id="viewBtn" onclick="info.view()" class="btn btn-success btn-xs">可视化</button>
				<button type="button" id="textBtn" onclick="info.text()" class="btn btn-default btn-xs">文本模式</button>
			</div>
		</div>
	</div>
	<jsp:include page="/WEB-INF/view/inc/js.jsp"></jsp:include>
	<jsp:include page="/WEB-INF/view/inc/utils/page.jsp"></jsp:include>
<script type="text/javascript">
var info = {
		content: '',
		init: function() {
			var name = '${msConfig.name}';
			if (name.indexOf('.properties') != -1) {
				// 不为properties文件，不支持可视化
				$('#viewPanel').css('display', 'block');
				$('#textPanel').css('display', 'none');
				$('#viewBtn').click();
			} else {
				$('#viewPanel').css('display', 'none');
				$('#textPanel').css('display', 'block');
				$('#viewBtn').css('display', 'none');
				$('#textBtn').click();
			}
		},
		view: function() {
			$('#textPanel').css('display', 'none');
			$('#viewPanel').css('display', 'block');
			var content = ['<table class="table table-striped table-hover">',
				'<thead>',
				'<tr class="info">',
                '	<th width="250">key</th>',
                '	<th>value</th>',
                '	<th width="150">备注</th>',
                '	<th width="60">操作</th>',
                '</tr>',
                '</thead>',
                '<tbody id="viewTbody">'];
			
			var valueContent = $('#content').val();
			var valueList = valueContent.split('\n');
			var remark = '';
			$.each(valueList, function(i, item) {
				if (item.length > 0 && item.substring(0, 1) == '#') {
					remark = item.substring(1);
				} else {
					if (item == '') {
						return true;
					}
					console.log('注释' + remark + '-' + item);
					var kvList = item.split('=');
					var code = '';
					var value = '';
					if (kvList.length > 2) {
						code = kvList[0];
						value = item.substring(item.indexOf('=') + 1);
					} else if (kvList.length == 2) {
						code = kvList[0];
						value = kvList[1];
					} else if (kvList.length == 1) {
						code = kvList[0];
					}
					content.push('<tr class="value-list">',
			                	'<td><input type="text" name="code" class="form-control input-xs" placeholder="key" value="',code,'"/></td>',
			                	'<td><input type="text" name="value" class="form-control input-xs" placeholder="key" value="',value,'"/></td>',
			                	'<td><input type="text" name="remark" class="form-control input-xs" placeholder="key" value="',remark,'"/></td>',
			                	'<td><a href="javascript:;" class="glyphicon text-success" onclick="info.del(this)">删除</a></td>',
			                '</tr>');
					remark = '';
				}
			});

			content.push('</tbody></table>');
			content.push('<div style="display:block;" class="text-center"><a class="btn btn-default btn-xs" href="javascript:info.addTr();">添加行</a></div>');
			$('#viewPanel').empty().append(content.join(''));
		},
		addTr: function() {
			$('#viewTbody').append(['<tr class="value-list">',
            	'<td><input type="text" name="code" class="form-control input-xs" placeholder="key" value=""/></td>',
            	'<td><input type="text" name="value" class="form-control input-xs" placeholder="key" value=""/></td>',
            	'<td><input type="text" name="remark" class="form-control input-xs" placeholder="key" value=""/></td>',
            	'<td><a href="javascript:;" class="glyphicon text-success" onclick="info.del(this)">删除</a></td>',
            '</tr>'].join(''));
		},
		convert: function() {
			var code = [];
			$('input[name="code"]').each(function(i, obj) {
				code.push($(obj).val());
			});
			var value = [];
			$('input[name="value"]').each(function(i, obj) {
				value.push($(obj).val());
			});
			var remark = [];
			$('input[name="remark"]').each(function(i, obj) {
				remark.push($(obj).val());
			});
			var content = [];
			$.each(code, function(i, item) {
				var remarkInfo = remark[i];
				if (remarkInfo != '') {
					content.push('#' + remarkInfo);
				}
				content.push(code[i] + '=' + value[i]);
			});
			$('#content').val(content.join('\n'));
		},
		del : function(_this) {
			$(_this).parent().parent().remove();
		},
		text: function() {
			$('#textPanel').css('display', 'block');
			$('#viewPanel').css('display', 'none');
		},
		save: function(eventId, isRefresh) {
			var _saveMsg = $('#saveMsg').empty();
			if ($('#viewPanel').css('display') == 'block') {
				info.convert();
			}
			var content = $('#content');
			JUtil.ajax({
				eventId: eventId,
				url : '${webroot}/msConfig/f-json/updateContent.shtml',
				data : {
					configId: $('#configId').val(),
					content: content.val(),
					isRefresh: isRefresh
				},
				success : function(json) {
					if (json.code === 0) {
						_saveMsg.attr('class', 'label label-success').append('保存成功');
						setTimeout(function() {
							parent.info.loadInfo();
							parent.dialog.close();
						}, 800);
					}
					else if (json.code === -1)
						_saveMsg.append(JUtil.msg.ajaxErr);
					else
						_saveMsg.append(json.message);
				}
			});
		}
};
$(function() {
	info.init();
	$('#saveRefreshBtn').click(function() {
		info.save('saveRefreshBtn', 1);
	});
	$('#saveBtn').click(function() {
		info.save('saveBtn', 0);
	});
});
</script>
</body>
</html>